<template>
    <div class="screen-tech" ref="screen">
        <div class="screen-contain">
            <point></point>
        </div>

        <button class="screen-btn" @click="toggleTop" style="position: absolute; right: 10px; top: 10px;z-index: 301;
                width: 32px; height: 32px;
                border: 1px solid lightblue;
                border-radius: 50%;">
            <i class="fa fw fa-chevron-up"></i>
        </button>

        <div ref="screenTopRef" class="flex-row screen-top sea-transition">
            <div class="flex-left top-left">
                top-left
            </div>
            <div class="flex-body top-center">
                body
            </div>
            <div class="flex-right top-right">
            </div>
        </div>

        <div ref="screenLeftRef" class="screen-left screen-panel sea-transition">
            <button class="screen-btn close-btn" @click="toggleLeft">
                <i class="fa fa-fw fa-angle-left"></i>
            </button>

            <div class="flex-row-gap attach-box">
                <button class="screen-btn screen-square-btn">
                    <i class="fa fa-map-marker"></i>
                </button>
                <button class="screen-btn screen-square-btn">

                </button>
                <button class="screen-btn screen-square-btn">

                </button>
            </div>

            <div class="screen-title">
                <h4 class="inline-block no-margin">
                    <i class="fa fa-fw fa-gear"></i>
                    标题1
                    <small>子标题</small>
                </h4>
                <span class="align-right">右侧标题</span>
            </div>
            <div class="screen-box">
                <p class="no-margin">
                    12312312
                </p>
                <p class="no-margin">
                    12312312
                </p>
                <p class="no-margin">
                    12312312
                </p>
            </div>

            <div class="screen-title">
                <h4 class="inline-block no-margin">
                    标题1
                    <small>子标题</small>
                </h4>
                <span class="align-right">右侧标题</span>
            </div>
            <div class="screen-box">
                <p class="no-margin">
                    12312312
                </p>
                <p class="no-margin">
                    12312312
                </p>
                <p class="no-margin">
                    12312312
                </p>
            </div>
        </div>

        <div ref="screenRightRef" class="screen-right screen-panel sea-transition">
            <button class="screen-btn close-btn" @click="toggleRight">
                <i class="fa fa-fw fa-angle-right"></i>
            </button>

            <div class="flex-row-gap attach-box">
                <button class="screen-btn screen-square-btn" @click="fullscreen">
                    <i class="fa fa-arrows-alt"></i>
                </button>

                <button class="screen-btn screen-square-btn">
                    <i class="fa fa-video-camera"></i>
                </button>
            </div>

            <div class="screen-title">
                <h4 class="inline-block no-margin">
                    标题1
                    <small>子标题</small>
                </h4>
                <span class="align-right">右侧标题</span>
            </div>
            <div class="screen-box">
                <label class="input-group">
                    <input type="text" class="sea-input" style="background-color: #0b3f4d">
                    <span class="sea-input-suffix"><i class="fa fa-fw fa-search"></i></span>
                </label>
            </div>
            <div class="screen-box">
                <div class="margin-bottom">
                    <div style="margin-bottom: 4px;padding-bottom: 4px;border-bottom: 1px dashed rgba(36,145,159,0.6)">
                        <i class="fa fa-fw fa-flag"></i>光泽楼下
                    </div>
                    <div>
                        告警：--% 报警：--%
                    </div>
                    <div>
                        地址：陕西省大东村
                    </div>
                </div>
                <div class="align-right">
                    <el-button size="small"><i class="fa fa-fw fa-location-arrow"></i>定位</el-button>
                </div>
            </div>
            <div class="screen-box">
                <div class="margin-bottom">
                    <div style="margin-bottom: 4px;padding-bottom: 4px;border-bottom: 1px dashed rgba(36,145,159,0.6)">
                        <i class="fa fa-fw fa-flag"></i>光泽楼下
                    </div>
                    <div>
                        告警：--% 报警：--%
                    </div>
                    <div>
                        地址：陕西省大东村
                    </div>
                </div>
                <div class="align-right">
                    <el-button size="small"><i class="fa fa-fw fa-location-arrow"></i>定位</el-button>
                </div>
            </div>
            <div class="screen-box">
                <div class="margin-bottom">
                    <div style="margin-bottom: 4px;padding-bottom: 4px;border-bottom: 1px dashed rgba(36,145,159,0.6)">
                        <i class="fa fa-fw fa-flag"></i>光泽楼下
                    </div>
                    <div>
                        告警：--% 报警：--%
                    </div>
                    <div>
                        地址：陕西省大东村
                    </div>
                </div>
                <div class="align-right">
                    <el-button size="small"><i class="fa fa-fw fa-location-arrow"></i>定位</el-button>
                </div>
            </div>
        </div>

        <div ref="screenBottomRef" class="screen-bottom screen-panel sea-transition">
            <div>
                <el-row>
                    <el-col :span="8">
                        <div class="screen-box">
                            <p>底部不设置高度，高度跟随内容</p>
                            <p>1</p>
                            <p>1</p>
                            <p>1</p>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="screen-box">
                            13123
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="screen-box">
                            13123
                        </div>
                    </el-col>
                </el-row>
            </div>
            <button class="screen-btn close-btn" @click="toggleBottom"><i class="fa fa-fw fa-angle-down"></i></button>
        </div>
    </div>
</template>

<script setup lang="ts">
import Point from "@/view/gis/base/point.vue";
import {ref} from "vue";

const screenLeftRef = ref();

const toggleLeft = () => {
    screenLeftRef.value.classList.toggle("slide-left");
}

const screenRightRef = ref();

const toggleRight = () => {
    screenRightRef.value.classList.toggle("slide-right");
}

const screenTopRef = ref();

const toggleTop = () => {
    screenTopRef.value.classList.toggle("slide-up");
}

const screenBottomRef = ref();

const toggleBottom = () => {
    screenBottomRef.value.classList.toggle("slide-down");
}

const fullscreen = async() =>{
    if (document.fullscreenElement) {
        if (document.exitFullscreen) {
            await document.exitFullscreen();
        }
    } else {
        const dom = document.documentElement;
        if (dom.requestFullscreen) {
            await dom.requestFullscreen();
        } else {
            console.info("Current browser not support dom full screen!");
        }
    }
}

</script>

<style lang="scss">
@use './screen-tech';
</style>